<template>
  <div>
    <el-alert title="企业微信相关操作正在开发中" type="success"> </el-alert>
    <el-card body-style="padding: 0">
      <el-form label-width="120px">
        <el-row :gutter="20">
          <el-col><el-form-item label="撤回消息"/></el-col>
          <el-col :span="18">
            <el-form-item label="消息ID" prop="msgid">
              <el-input v-model="msgid" placeholder="请输入要撤回的消息ID" />
            </el-form-item>
          </el-col>
          <el-col :span="6" :offset="0">
            <el-form-item>
              <el-button
                type="danger"
                size="small"
                @click="recallMessage()"
                icon="el-icon-refresh-left"
              >
                撤回</el-button
              >
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <el-card body-style="padding: 0">
      <el-form label-width="120px">
        <el-row :gutter="20">
          <el-col><el-form-item label="发送文本消息"/></el-col>
          <el-col :span="5">
            <el-form-item label="应用ID" prop="appId">
              <el-input
                v-model="wechatQueryform.appId"
                placeholder="要发送的应用ID"
              />
            </el-form-item>
          </el-col>
          <el-col :span="13">
            <el-form-item label="成员" prop="touser">
              <el-input
                v-model="wechatQueryform.touser"
                placeholder="请输入指定接收消息的成员,为空时全部通知,多个接收者用‘|’分隔"
              />
            </el-form-item>
          </el-col>
          <el-col :span="18">
            <el-form-item label="部门" prop="toparty">
              <el-input
                v-model="wechatQueryform.toparty"
                placeholder="请输入指定接收消息的部门,多个接收者用‘|’分隔"
              />
            </el-form-item>
          </el-col>
          <el-col :span="18">
            <el-form-item label="标签" prop="totag">
              <el-input
                v-model="wechatQueryform.totag"
                placeholder="请输入指定接收消息的标签,多个接收者用‘|’分隔"
              />
            </el-form-item>
          </el-col>
          <el-col :span="18">
            <el-form-item label="消息文本" prop="message">
              <el-input
                v-model="wechatQueryform.message"
                placeholder="请输入要发送的消息"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6" :offset="0">
            <el-form-item>
              <el-button
                type="success"
                size="small"
                @click="submitQueryForm()"
                icon="el-icon-chat-dot-round"
              >
                发送</el-button
              >
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { sendTextMessage, recallMessage } from "../../api/wechat/weChat.js";
export default {
  name: "Nacos",
  data() {
    return {
      wechatQueryform: {
        appId: null,
        touser: "",
        toparty: "",
        totag: "",
        message: "",
      },
      msgid: "",
    };
  },
  methods: {
    submitQueryForm() {
      sendTextMessage(this.wechatQueryform).then((res) => {
        this.$message({ message: res.data, type: "success" });
        this.wechatQueryform.appId = null;
        this.wechatQueryform.touser = "";
        this.wechatQueryform.toparty = "";
        this.wechatQueryform.totag = "";
        this.wechatQueryform.message = "";
        this.setData(res);
      });
    },

    recallMessage() {
      if (this.msgid == "" || this.msgid == null) {
        this.$message({ message: "消息ID不能为空", type: "error" });
      } else {
        recallMessage(this.msgid).then((res) => {
          this.$message({ message: res.data, type: "success" });
          this.msgid = "";
        });
      }
    },
    setData(roles) {
      if (roles.isok) {
        this.msgid = roles.data;
      }
    },
  },
};
</script>

<style scoped>
.db-document-frame {
  margin-top: 40px;
  background-color: transparent;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.el-form {
  margin-top: 20px;
}
</style>
